<template>
	<!-- 章节练习【筛选题库】 -->
	<view>
		<view class="container">
			<u-navbar :border-bottom="false" title="筛选" back-icon-name="back" back-icon-size="29upx" title-color="#303133" back-icon-color="#363940"></u-navbar>
			<view
				class="que-bank-item"
				:class="[item.quebankid == checkedQueBankId ? 'active' : '']"
				v-for="item in queBank"
				:key="item.quebankid"
				@click="onSelectQueBank(item.quebankid)"
			>
				<text>{{ item.quebankname }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			queBank: [],
			checkedQueBankId: '',
			clickTrue:false,//禁止连续点击
		};
	},
	onLoad({ queBank, checkedQueBankId }) {
		this.queBank = JSON.parse(queBank);
		this.checkedQueBankId = checkedQueBankId;
	},
	onNavigationBarButtonTap(e) {
		// console.log(e);
		this.back();
	},
	methods: {
		onSelectQueBank(quebankid) {
			//禁止二次点击
			if(!this.clickTrue){
				this.clickTrue=true;
				setTimeout(function(){this.clickTrue=false},1000)
			}else return
			this.checkedQueBankId = quebankid;
			this.$nextTick(function() {
				uni.$emit('updateCheckedQueBankId', {
					val: this.checkedQueBankId
				});
				this.back();
			});
		},
		back() {
			uni.navigateBack({
				delta: 1,
				animationType: 'slide-out-right'
			});
		}
	}
};
</script>
<style lang="scss">
.container {
	padding: 80upx;
	padding-top: 30upx;
}
.u-navbar{
	background: #fff!important;
}
.active {
	background: rgba(244, 92, 75, 0.1) !important;
	border: 1px solid #f45c4b;
	color: #f45c4b !important;
	text{
		font-weight: 500;
	}
}
.u-back-wrap{ margin-left: 20upx;}
.que-bank-item {
	background: #f8f8f8;
	font-size: 32upx;
	font-weight: 400;
	// width: 500upx;
	// margin: 0 auto;
	color: #636874;
	margin-bottom: 40upx;
	border-radius: 55upx;
	height: 110upx;
	display: flex;
	align-items: center;
	// transition: all 0.3s ease-in-out;
	text {
		width: 100%;
		padding: 0 50upx;
		display: block;
		text-align: center;
		// font-weight: 500;
	}
}
</style>
